<!-- 房产发布 - 库存价格 -->
<template>
  <el-form
    ref="formRef"
    v-loading="formLoading"
    :disabled="isDetail"
    :model="formData"
    :rules="rules"
    label-width="120px"
  >
    <el-form-item label="房产规格" prop="specType">
      <el-radio-group v-model="formData.specType" class="w-80" @change="onChangeSpec">
        <el-radio :value="false" class="radio">单规格</el-radio>
        <el-radio :value="true">多规格</el-radio>
      </el-radio-group>
    </el-form-item>
    <!-- 多规格添加-->
    <el-form-item v-if="!formData.specType">
      <SkuList
        ref="skuListRef"
        :prop-form-data="formData"
        :property-list="propertyList"
        :rule-config="ruleConfig"
      />
    </el-form-item>
    <el-form-item v-if="formData.specType" label="房产维度属性">
      <el-button class="mb-10px mr-15px" @click="attributesAddFormRef.open">添加属性</el-button>
      <HouseAttributes
        :is-detail="isDetail"
        :property-list="propertyList"
        @success="generateSkus"
      />
    </el-form-item>
    <template v-if="formData.specType && propertyList.length > 0">
      <!-- <el-form-item v-if="!isDetail" label="批量设置">
        <SkuList :is-batch="true" :prop-form-data="formData" :property-list="propertyList" />
      </el-form-item> -->
      <el-form-item v-if="!isDetail">
        <el-button @click="attributesComposeAddFormRef.open">
          <Icon class="mr-5px" icon="ep:plus" />添加维度组合
        </el-button>
      </el-form-item>

      <el-form-item label="房产维度组合">
        <SkuList
          ref="skuListRef"
          :is-detail="isDetail"
          :prop-form-data="formData"
          :property-list="propertyList"
          :rule-config="ruleConfig"
        />
      </el-form-item>
    </template>
  </el-form>

  <!-- 房产属性添加 Form 表单 -->
  <HousePropertyAddForm ref="attributesAddFormRef" :propertyList="propertyList" />

  <!-- 房产维度组合添加 Form 表单 -->
  <HousePropertyComposeAddForm
    ref="attributesComposeAddFormRef"
    :propertyList="propertyList"
    @success="handleComposeSuccess"
  />
</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'
import {
  getPropertyList,
  PropertyAndValues,
  RuleConfig,
  SkuList
} from '@/views/house/house/spu/components/index'
import HouseAttributes from './HouseAttributes.vue'
import HousePropertyAddForm from './HousePropertyAddForm.vue'
import HousePropertyComposeAddForm from './HousePropertyComposeAddForm.vue'
import type { Spu } from '@/api/house/house/spu'

defineOptions({ name: 'HouseSpuSkuForm' })

// sku 相关属性校验规则
const ruleConfig: RuleConfig[] = [
  // {
  //   name: 'oldArea',rule: (arg) => arg > 0,message: '旧房产面积必须大于 0 ！！！'
  // },
  // {
  //   name: 'area',rule: (arg) => arg >= 0.01,message: '房产面积必须大于 0 ！！！'
  // },
]

const message = useMessage() // 消息弹窗
const formLoading = ref(false)
const props = defineProps({
  propFormData: {
    type: Object as PropType<Spu>,
    default: () => {}
  },
  isDetail: propTypes.bool.def(false) // 是否作为详情组件
})
const attributesAddFormRef = ref() // 添加房产属性表单
const attributesComposeAddFormRef = ref() // 添加房产维度组合表单
const formRef = ref() // 表单 Ref
const propertyList = ref<PropertyAndValues[]>([]) // 房产属性列表
const skuListRef = ref() // 房产属性列表 Ref
const formData = reactive<Spu>({
  specType: false, // 房产规格
  skus: [],
  oldArea: 0,
  area: 0
})
const rules = reactive({
  specType: [required],
  subCommissionType: [required]
})

/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
    // 将 SKU 的属性，整理成 PropertyAndValues 数组
    propertyList.value = getPropertyList(data)
  },
  {
    immediate: true
  }
)

/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    // 校验 sku
    skuListRef.value.validateSku()
    await unref(formRef).validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('【房产面积】不完善，请填写相关信息')
    emit('update:activeName', 'sku')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })

/** 选择规格 */
const onChangeSpec = () => {
  // 重置房产属性列表
  propertyList.value = []
  // 重置sku列表
  formData.skus = [
    {
      oldArea: 0,
      area: 0,
      status: 0,
      useNewArea: false,
      isCalculate: 0
    }
  ]
}

const handleComposeSuccess = (properties: any[]) => {
  skuListRef.value.generateTableData(properties)
}
/** 调用 SkuList generateTableData 方法*/
const generateSkus = (propertyList: any[]) => {
  // 取消自动生成sku
  //skuListRef.value.generateTableData(propertyList)
}
</script>
